import { Button } from '@/components/ui/button'
import { Check, Send, X } from 'lucide-react'
import Image from "next/image"
import React, { useEffect, useRef, useState } from 'react'

interface EditorAssistantProps {
  isVisible: boolean
  onClose: () => void
  onGenerate: (content: string) => void
  position: { x: number; y: number }
}

const EditorAssistant: React.FC<EditorAssistantProps> = ({ isVisible, onClose, onGenerate, position }) => {
  const [input, setInput] = useState('')
  const [isSent, setIsSent] = useState(false)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
      const scrollHeight = textareaRef.current.scrollHeight
      const newHeight = Math.min(scrollHeight, 5 * 24) // 假设行高为24px
      textareaRef.current.style.height = `${newHeight}px`
    }
  }, [input])

  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleGenerate()
    }
  }

  const handleGenerate = () => {
    if (input.trim()) {
      setIsSent(true)
    }
  }

  const handleConfirm = () => {
    onGenerate(input)
    setInput('')
    setIsSent(false)
    onClose()
  }

  const handleCancel = () => {
    setIsSent(false)
  }

  if (!isVisible) return null

  return (
    <div 
      className="fixed bg-background rounded-lg shadow-lg p-4 z-50 transition-all duration-200 ease-in-out"
      style={{ 
        top: position.y, 
        left: position.x,
        width: '600px',
        minHeight: '80px',
        maxHeight: isSent ? '240px' : '200px'
      }}
    >
      <div className="flex items-start gap-4">
        <Image
          src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/head_02_gold.jpg-JbZhuDPAO7lwvHfJDpNrOV6d1t4Tdg.jpeg"
          alt="编辑器助理"
          width={32}
          height={32}
          className="rounded-full"
        />
        <div className="flex-grow">
          <textarea
            ref={textareaRef}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="让编辑器助理帮助您写点什么..."
            className="w-full resize-none overflow-hidden p-2 rounded
              focus:outline-none
              focus:bg-gradient-to-r focus:from-blue-50 focus:to-blue-100
              focus:border focus:border-blue-200
              transition-all duration-200 ease-in-out"
            style={{
              minHeight: '24px',
              maxHeight: '120px',
            }}
            disabled={isSent}
            autoFocus
            onBlur={() => {
              if (!isSent) {
                setTimeout(() => {
                  onClose()
                }, 100)
              }
            }}
          />
          <div className="flex justify-end mt-2">
            {!isSent ? (
              <Button size="sm" variant="ghost" onClick={handleGenerate} disabled={!input.trim()}>
                <Send className="w-4 h-4" />
              </Button>
            ) : (
              <>
                <Button size="sm" variant="ghost" onClick={handleCancel} className="mr-2">
                  <X className="w-4 h-4" />
                  <span className="ml-1">取消</span>
                </Button>
                <Button size="sm" variant="ghost" onClick={handleConfirm}>
                  <Check className="w-4 h-4" />
                  <span className="ml-1">确认</span>
                </Button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default EditorAssistant